<template>
  <div>
    <h2>我的预约</h2>
    <el-input
      v-model="searchQuery"
      placeholder="搜索预约..."
      clearable
      style="width: 50%; margin-bottom: 20px;"
    />

    <p v-if="filteredReservations.length === 0">此处没有预约记录。</p>

    <el-row :gutter="20" v-else>
      <el-col v-for="reservation in paginatedReservations" :key="reservation.id" :span="6">
        <ReservationCard :reservation="reservation" @action-complete="fetchReservations" />
      </el-col>
    </el-row>

    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="filteredReservations.length"
      @current-change="handlePageChange"
      style="margin-top: 20px;"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { findReservationByUserIdService } from '@/api/locationrecord'; // 确保路径正确
import ReservationCard from '@/components/Location/MyReservationCard.vue'; // 引入预约信息卡片组件

const reservations = ref([]);
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(6);

// 查询当前用户的预约记录
const fetchReservations = async () => {
  try {
    const response = await findReservationByUserIdService();
    reservations.value = response.data;
  } catch (error) {
    console.error('查询预约记录时出错:', error);
  }
};

// 计算过滤后的预约记录
const filteredReservations = computed(() => {
  return reservations.value.filter(reservation => 
    reservation.locationName.includes(searchQuery.value) || 
    reservation.userPhone.includes(searchQuery.value)
  );
});

// 计算分页后的预约记录
const paginatedReservations = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return filteredReservations.value.slice(start, start + pageSize.value);
});

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
};

// 组件挂载时调用查询函数
onMounted(() => {
  fetchReservations();
});
</script>

<style scoped>
h2 {
  margin-bottom: 20px; /* 添加标题下边距 */
}
</style>
